<template>
  <a-timeline class="custom-timeline" mode="right">
    <a-timeline-item
      v-for="month in months"
      :key="month.value"
      :color="month.value === modelValue ? 'blue' : 'gray'"
      @click="onClick(month.value)"
      class="timeline-item"
      :class="{ active: month.value === modelValue, disabled: month.disabled }"
    >
      <span>{{ month.label }}</span>
    </a-timeline-item>
  </a-timeline>

</template>

<script setup>
import { h } from 'vue';
import { CheckCircleFilled } from '@ant-design/icons-vue';

const props = defineProps({
  months: { type: Array, required: true },
  modelValue: { type: String, required: true }
});
const emit = defineEmits(['update:modelValue']);

const customActiveDot = h('div', {
  style: {
    width: '32px',
    height: '24px',
    background: '#faad14',
    color: '#fff',
    borderRadius: '12px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontWeight: 'bold',
    fontSize: '14px',
    boxShadow: '0 0 2px #faad14',
  }
}, '●');

const customCheckDot = h(CheckCircleFilled, {
  style: { color: '#1890ff', fontSize: '18px' }
});

function onClick(val) {
  emit('update:modelValue', val);
}
</script>

<style scoped lang="less">
.custom-timeline {
  background: #f5f5f5;
  padding: 10px 0;
  border-radius: 6px;
  width: 100px;
}
.timeline-item {
  cursor: pointer;
  user-select: none;
  min-height: 32px;
}
.timeline-item.active span {
  background-color: #1890ff;
  color: white;
  padding: 0 10px;
  border-radius: 4px;
  font-weight: bold;
}
.timeline-item.disabled {
  color: #ccc;
  cursor: not-allowed;
}



</style> 